<!--
 * @Description: 日程详情组件
-->
<template>
  <el-dialog v-model="visible" title="日程详情" width="80%" @close="handleClose">
    <div class="richeng-detail">
      <div class="detail-item">
        <span class="label">开始时间：</span>
        <span class="value">{{ addrcinfo.startDate }} {{ addrcinfo.startTime }}</span>
      </div>
      
      <div class="detail-item">
        <span class="label">结束时间：</span>
        <span class="value">{{ addrcinfo.endDate }} {{ addrcinfo.endTime }}</span>
      </div>
      
      <div class="detail-item">
        <span class="label">内容：</span>
        <span class="value">{{ addrcinfo.content }}</span>
      </div>
      
      <div v-if="addrcinfo.address" class="detail-item">
        <span class="label">地点：</span>
        <span class="value">{{ addrcinfo.address }}</span>
      </div>
      
      <div v-if="addrcinfo.name" class="detail-item">
        <span class="label">客户：</span>
        <span class="value">{{ addrcinfo.name }}</span>
      </div>
      
      <div v-if="addrcinfo.contact" class="detail-item">
        <span class="label">联系方式：</span>
        <span class="value">{{ addrcinfo.contact }}</span>
      </div>
      
      <div v-if="addrcinfo.researcherName" class="detail-item">
        <span class="label">研究员：</span>
        <span class="value">{{ addrcinfo.researcherName }}</span>
      </div>
    </div>
    
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElDialog, ElButton } from 'element-plus'

interface Props {
  show: boolean
  addrcinfo: any
}

const props = defineProps<Props>()

const emit = defineEmits<{
  onClose: []
}>()

const visible = computed({
  get: () => props.show,
  set: (value) => {
    if (!value) {
      emit('onClose')
    }
  }
})

const handleClose = () => {
  emit('onClose')
}
</script>

<style scoped lang="less">
.richeng-detail {
  .detail-item {
    display: flex;
    margin-bottom: 16px;
    
    .label {
      width: 80px;
      color: #666;
      flex-shrink: 0;
    }
    
    .value {
      flex: 1;
      word-break: break-all;
    }
  }
}
</style>
